<template>
  <div class="com_comHeader">
    <div @click='zzbPacket()' class="head">
      <div  v-show='packet!=1'>{{comHeaderObj.title}}</div>
      <div v-show='packet==1'>钱包</div>
      <div style="margin-top: 6px">
        <span v-show="comHeaderObj.money">￥<span>{{(comHeaderObj.money / 1000).toFixed(2)}}</span><span>元</span></span>
        <span v-show="!!!(comHeaderObj.money)">暂无</span>
      </div>
    </div>
    <van-row v-show="packet!=1" type="flex" justify="space-around" align="center" style="text-align: center; margin-bottom: 20px;">
      <van-col span="7" v-show="comHeaderObj.leftBtnText">
        <van-button size="small"  color="#7232dd" @click="toNeedPage_left">{{comHeaderObj.leftBtnText}}</van-button>
      </van-col>
      <van-col span="7" v-show="comHeaderObj.middleBtnText">
        <van-button size="small" type="info" @click="toNeedPage_others(comHeaderObj.middleBtnPath, 'middle')">
          {{comHeaderObj.middleBtnText}}
        </van-button>
      </van-col>
      <van-col span="7" v-show="comHeaderObj.rightBtnText">
        <van-button size="small" color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="toNeedPage_others(comHeaderObj.rightBtnPath, 'right')">
          {{comHeaderObj.rightBtnText}}
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  export default {
    name: 'comHeader',
    props: {
      comHeaderObj: Object,
      packet:String
    },
    methods: {
      zzbPacket(){
        this.$router.push('zzbPacket')
      },
      // 去（左边）提现页面
      toNeedPage_left(){
        const param = this.comHeaderObj.cashOutSign
        const leftBtnPath = this.comHeaderObj.leftBtnPath
        this.$router.push({
          path: `${leftBtnPath}/${param}`,
        })
      },

      toNeedPage_others(path, direction){
        if (path){
          // 跳转
          if (direction === 'middle'){
            // 中间的按钮，直接跳转
            this.$router.push(path)
          } else {
            // 关键字
            // 右边的按钮进行拼接
            const param2 = this.comHeaderObj.cashOutSign
            const rightBtnPath = this.comHeaderObj.rightBtnPath
            this.$router.push({
              path: `${rightBtnPath}/${param2}`,
            })
          }

        }
      },
    },

  }
</script>

<style lang="scss" scoped>
  .com_comHeader{
    .head {
      height: 100px;
      width:150px;
      border-radius: 50%;
      color: #fff;
      background-color:#0099FF;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 30px auto;
    }
  }

</style>
